<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../css/reset.css">
    <link rel="stylesheet" type="text/css" href="../css/common-list.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  </head>
  <body>
    <header>
      <div class="header-con">
        <a class="navbar-header" href="">
          <img src="../images/logo.png" alt="">
        </a>
        <ul>
          <li>
            <a href="">首页</a>
          </li>
          <li>
            <a href="">人资管理</a>
          </li>
          <li>
            <a href="">指标设置</a>
          </li>
          <li>
            <a href="">数据统计</a>
          </li>
          <li>
            <a href="">工作时设置</a>
          </li>
          <li>
            <a href="">财务管理</a>
          </li>
        </ul>
      </div>
      <div class="peo-message">
        <div class="peo-cir">
          <!-- <img src="" alt=""> -->
        </div>
        <em>黑披士</em>
        <span class="down-list"></span>
        <!-- <ul>
          <li>123</li>
          </ul> -->
      </div>
    </header>
    <div class="boxed clearfix">
      <div class="common-tit">
        <h2>财务数据</h2>
        <span>数据统计 > 财务数据</span>
      </div>
      <div class="global-data">
        <div class="xdata-box">
          <h3>总计</h3>
          <ul>
            <li>
              <span>156</span>
              <em>收入(元)</em>
            </li>
            <li>
              <span>156</span>
              <em>支出(元)</em>
            </li>
            <li>
              <span>156</span>
              <em>课消(元)</em>
            </li>
          </ul>
          <div id="finaData"></div>
        </div>
        <div class="pdata-box clearfix">
          <div id="incomeData"></div>
          <div id="expendiData"></div>
        </div>
      </div>
    </div>
    <script src="../js/jquery-1.12.3.js"></script>
    <script src="../js/echarts.common.min.js"></script>
    <script src="../js/common-list.js"></script>
    <script>
// 财务
var myChart = echarts.init(document.getElementById('finaData'));
var xAxisData = [];
var data1 = [];
var data2 = [];
var data3 = [];
for (var i = 0; i < 30; i++) {
  if (i < 10) {
    xAxisData.push('2016-10-0' + (i + 1));
  } else {
    xAxisData.push('2016-10-' + (i + 1));
  }
  data1.push(Math.abs((Math.sin(i / 5) * (i / 5 -10) + i / 6) * 5));
  data2.push(Math.abs((Math.cos(i / 5) * (i / 5 -10) + i / 6) * 5));
  data3.push(Math.abs((Math.cos(i / 5) * (i / 5 -10) + i / 6) * 5));
}

option = {
  legend: {
    data: ['收入(元)', '支出(元)', '课消(元)'],
    align: 'left'
  },
  toolbox: {
    // y: 'bottom',
    feature: {
      magicType: {
        type: ['stack', 'tiled']
      },
      dataView: {},
      saveAsImage: {
        pixelRatio: 2
      }
    }
  },
  tooltip: {},
  xAxis: {
    data: xAxisData,
    silent: false,
    splitLine: {
      show: false
    }
  },
  yAxis: {
  },
  toolbox: {
    show : true,
  },
  dataZoom: [{
    startValue: '2016-10-09'
  }, {
    type: 'inside'
  }],
    series: [{
      name: '收入(元)',
      type: 'bar',
      data: data1,
      animationDelay: function (idx) {
        return idx * 10;
      }
    }, {
      name: '支出(元)',
      type: 'bar',
      data: data2,
      animationDelay: function (idx) {
        return idx * 10 + 100;
      }
    }, {
      name: '课消(元)',
      type: 'bar',
      data: data3,
      animationDelay: function (idx) {
        return idx * 10 + 150;
      }
    }],
      animationEasing: 'elasticOut',
      animationDelayUpdate: function (idx) {
        return idx * 5;
      }
};
myChart.setOption(option);
// 收入类型比
var myChart1 = echarts.init(document.getElementById('incomeData'));
option1 = {
  title : {
    text: '收入类型比',
    x:'14%'
  },
  color : ['#3cf','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
  tooltip : {
    trigger: 'item',
    formatter: "{a} <br/>{b} : {c} ({d}%)"
  },
  legend: {
    x : 'center',
    y : 'bottom',
    data:['主营业务收入','营业外收入','其他收入']
  },
  toolbox: {
    show : true,
    feature : {
      mark : {show: true},
      // dataView : {show: true, readOnly: false},
      magicType : {
        show: true,
        type: ['pie', 'funnel']
      },
      // restore : {show: true},
      saveAsImage : {show: true}
    }
  },
  calculable : true,
  series : [
  {
    name:'半径模式',
    type:'pie',
    radius : [20, 140],
    center : ['50%', '50%'],
    roseType : 'radius',
    lableLine: {
      normal: {
        show: false
      },
      emphasis: {
        show: true
      }
    },
    data:[
    {value:10, name:'主营业务收入'},
    {value:5, name:'营业外收入'},
    {value:15, name:'其他收入'}
    ]
  }
  ]
};
myChart1.setOption(option1);



//支出类型比
var myChart2 = echarts.init(document.getElementById('expendiData'));
option2 = {
  title : {
    text: '支出类型比',
    x:'14%'
  },
  color : ['#3cf', '#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
  tooltip : {
    trigger: 'item',
    formatter: "{a} <br/>{b} : {c} ({d}%)"
  },
  legend: {
    x : 'center',
    y : 'bottom',
    data:['产品支出','营销支出','管理支出','学员退费', '其他支出']
  },
  toolbox: {
    show : true,
    feature : {
      mark : {show: true},
      // dataView : {show: true, readOnly: false},
      magicType : {
        show: true,
        type: ['pie', 'funnel']
      },
      // restore : {show: true},
      saveAsImage : {show: true}
    }
  },
  calculable : true,
  series : [
  {
    name:'半径模式',
    type:'pie',
    radius : [20, 140],
    center : ['50%', '50%'],
    roseType : 'radius',
    lableLine: {
      normal: {
        show: false
      },
      emphasis: {
        show: true
      }
    },
    data:[
    {value:10, name:'产品支出'},
    {value:5, name:'营销支出'},
    {value:15, name:'管理支出'},
    {value:25, name:'学员退费'},
    {value:8, name:'其他支出'}
    ]
  }
  ]
};
myChart2.setOption(option2);
    </script>
  </body>
</html>
